Skip to content

fix(overlay and picker): remove aria-hidden attribute #30553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 14 commits into
base: next
Choose a base branch
from
Open

fix(overlay and picker): remove aria-hidden attribute #30553

wants to merge 14 commits into from
+91 −453

Conversation

joselrio
Copy link
Contributor

@joselrio joselrio commented Jul 16, 2025 •
edited
Loading

Issue number: resolves #

What is the current behavior?

  • The usage of aria-hidden="true" attributes both on overlay and picker components was causing some console error/warnings messages.
  • This was being caused due the fact of the activeElement (focused element) was inside those elements with this attribute that's equal to true in all cases.
image

What is the new behavior?

  • There is no need of making usage of this attribute due the facts:

    1. Once overlay is closed the focus will be redirect to the element that triggers the overlay, this way screen readers will be also redirected to the same context of focused element.
    1. After overlay is closed, it will be set as a display: none; through the selector :host(.overlay-hidden), which by itself will disable overlay content for the screen readers.

  • Removed overlay tests since they were basically checking about aria-hidden attribute.

  • Updated PickerColumn and PickerColumnOption structure in order to fit the a11y needs.

  • Added a focus management system to better drive users when making usage of keyboard navigation inside picker.

Does this introduce a breaking change?

  • Yes
  • No

Testing:

Note:

@joselrio joselrio requested a review from a team as a code owner July 16, 2025 11:52
@joselrio joselrio requested a review from brandyscarney July 16, 2025 11:53
@vercel Vercel
Copy link

vercel bot commented Jul 16, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 17, 2025 11:06pm

@github-actions github-actions bot added the package: core @ionic/core package label Jul 16, 2025
@joselrio joselrio added the a11y Accessibility related issues label Jul 16, 2025
@brandyscarney
Copy link
Member

Can we make this change on main?

@joselrio
Copy link
Contributor Author

Can we make this change on main?

Dam, forgot it!
Will do it ;)

joselrio added 2 commits July 17, 2025 11:16
@joselrio
fix(picker-column): adapt structure to prevent double tab tap on keyb…
c1574ff 
…oard navigation
@joselrio
fix(picker-column-option): changed structure in order to remove tabin…
3626302 
…dex="-1"

This is needed in order to prevent A11Y issues, in order to prevent to be possible to navigate through each option item through tab navigation, structure must change into this.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandyscarney brandyscarney Awaiting requested review from brandyscarney brandyscarney is a code owner automatically assigned from ionic-team/framework

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
a11y Accessibility related issues package: core @ionic/core package
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@joselrio @brandyscarney